<template>
  <MyChart :loading="loading" :options="options" :dataEmptyFlag="dataEmptyFlag" @echartsClick="echartsClick"></MyChart>
</template>
<script setup name="EchartsBar">
import { ref, watch, onMounted } from 'vue';
import MyChart from "@/components/MyCharts/index.vue";
import * as echarts from "echarts";
const loading = ref(false);
const dataEmptyFlag = ref(false);
const emit = defineEmits(["echartsClick"]);
const props = defineProps({
  height: {
    type: String,
    default: "100%",
  },
  width: {
    type: String,
    default: "100%",
  },
  xData: {
    type: Object,
    default: function () {
      return {};
    },
  },
  dataList: {
    type: Array,
    default: function () {
      return [{
        name: "1月",
        value: 50,
      },
      {
        name: "2月",
        value: 40,
      },
      {
        name: "3月",
        value: 20,
      },
      {
        name: "4月",
        value: 10,
      },
      {
        name: "5月",
        value: 0,
      },
      {
        name: "6月",
        value: 11,
      },
      {
        name: "7月",
        value: 100,
      },
      {
        name: "8月",
        value: 33,
      }
      ];
    },
  },
});
watch(() => props.dataList, (list) => {
  loadECharts();
});
const barOption = ref({
  bar1Top: "#2A8CF0",
  bar1Side: "#2A8CF0",
  bar1Bottom: "#15418C",
  bar2Top: "#44E6E6",
  bar2Side: "#44E6E6",
  linePoint: "#FFD15C",

});
const options = ref();
const fetchData = () =>
  new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        yData: [150, 230, 224, 218, 135, 147, 260],
      });
    }, 1000);
  });

const baseOption = {
  backgroundColor: "#00000000",
  tooltip: {
    trigger: "axis",
    borderColor: "rgba(255,255,255,.3)",
    backgroundColor: "rgba(13,5,30,.6)",
    textStyle: {
      color: "white", //设置文字颜色
    },
    borderWidth: 1,
    padding: 5,
    formatter: '{b}:{c}人'
  },

  grid: {
    containLabel: true,
    left: "5%",
    top: "20%",
    bottom: "5%",
    right: "5%",
  },
  xAxis: {
    type: "category",
    axisLabel: {
      interval: 0, // 设置为 0，表示强制显示所有标签
      rotate: 0, // 设置标签倾斜角度，负数表示逆时针旋转
      color: "#A9AEB2", //单位值的颜色
    },
    data: [],
  },
  yAxis: [
    {
      type: "value",
      gridIndex: 0,
      // min: 0,
      // max: 100, //max1, // 计算最大值
      // interval: 100 / 5, // 平均分为5份
      axisLine: {
        show: false,
        lineStyle: {
          color: "#ffffffa5",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          // 使用深浅的间隔色
          color: ["#B5B5B5"],
          type: "dashed",
          opacity: 0.5,
        },
      },
      axisLabel: {
        textStyle: { fontSize: 12, color: "#ffffffa5" },
        // formatter: (params) => {
        //   return `${params}%`;
        // },
      },
    },
    {
      show: false,
      type: "value",
      gridIndex: 0,
      min: 0,
      max: 100, //max1, // 计算最大值
      interval: 100 / 5, // 平均分为5份
      splitNumber: 5,
      // name: "金额（万元）",
      nameTextStyle: {
        color: "#82AFC6",
        fontSize: 12,
        padding: [0, 0, -8, -100],
      },
      axisLabel: {
        textStyle: { fontSize: 12, color: "#ffffffa5" },
        formatter: (params) => {
          return `${params}%`;
        },
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "#3E5B7D",
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: "#102E74",
        },
      },
    },
  ],
  series: [],
};

const loadECharts = () => {
  if (!props.dataList || props.dataList.length == 0) {
    dataEmptyFlag.value = true
  } else {
    dataEmptyFlag.value = false
  }
  let xData = props.dataList.map((item) => {
    return item.name;
  });
  let yData = props.dataList.map((item) => {
    return item.value;
  });

  let seriesdata_bj = []
  props.dataList.map((item) => {
    seriesdata_bj.push(100);
  })


  baseOption.xAxis.data = xData
  baseOption.series = [
    {
      name: "数量",
      // 柱子宽度
      barWidth: 100,
      // 塔尖柱子类型
      type: "pictorialBar",
      barCategoryGap: "0",
      // 必须引入该项
      symbol:
        "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
      itemStyle: {
        //barBorderRadius: 5,
        //渐变色
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#00F6FF",
          },
          {
            offset: 0.5,
            color: "#00F6FF88",
          },
          {
            offset: 1,
            color: "rgba(15, 31, 56, 0)",
          },
        ]),
      },
      // 柱状图上方数据
      label: {
        show: true,
        position: "top",
        color: "#FFF",
      },
      data: yData,
      z: 10,
    },
  ];
  options.value = { ...baseOption };
};
function echartsClick(params) {
  emit("echartsClick", params);
}

onMounted(loadECharts);
</script>
<style lang="scss" scoped>
.h-3 {
  width: 800px;
  height: 800px;
  background-color: #7f0900;
}

/*懒加载图标动画*/
.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}

@keyframes ani-demo-spin {
  from {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/*弹窗样式*/
.layer {
  position: absolute;
  left: 400px;
  top: 300px;
  z-index: 100;
  width: 360px;
  height: 280px;
  background: rgba(10, 22, 64, 0.9);
  border-radius: 5px;
  border: 1px solid #122253;
  transform: translate(-100%, -100%);

  .content {
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;

    p {
      font-size: 20px;
      color: #fff;
      line-height: 50px;
    }

    .col-item {
      height: 41px;
      margin-top: 20px;
      border-right: 1px solid #172353;

      .num {
        color: #ebf8ff;
        font-size: 18px;
      }

      .text {
        color: #507ebc;
        font-size: 12px;
      }
    }
  }

  .content::after {
    content: "";
    width: 120px;
    height: 2px;
    background: #ffccff;
    position: absolute;
    right: -120px;
    top: 50%;
    transform: translateY(-50%);
  }

  .content::before {
    content: "";
    width: 2px;
    height: 80px;
    background: #ffb800;
    position: absolute;
    right: -134px;
    top: 136px;
    transform: rotateZ(-20deg);
  }
}
</style>
